<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8">
	<title>录入</title>
	<script type="application/javascript" src="/static/js/common.js"></script>
</head>


<body>
	<nav class="nav">
		<a class="button button-link left" onclick="history.back();">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-fanhui-"></use>
			</svg>返回
		</a>
		<a class="button button-link right" onclick="history.go(0);">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-zhuanfa-"></use>
			</svg>刷新
		</a>
		<h1 class="title">录入</h1>
	</nav>
	<header class='app-header'>
		<h1 class="app-title">当日账单录入</h1>
	</header>
	<div class="app-content">
		<div class="weui-panel weui-panel_access">
			<div class="weui-panel__hd">当日账单录入</div>
			<div class="weui-panel__bd">
				<form id="bookInputForm" class="weui-cells weui-cells_form">
					<div class="weui-cell">
						<div class="weui-cell__hd"><label class="weui-label">参与人员</label></div>
						<div class="weui-cell__bd">
							<input type="hidden" name="consumeOwner" th:value="${current.uuid}">
							<input class="weui-input" name="consumeParticipator" id="join" type="text" th:data-values="${current.getUuid()}" th:value="${current.getUserName()}">
						</div>
					</div>
					<div class="weui-cell">
						<div class="weui-cell__hd"><label class="weui-label">消费类型</label></div>
						<div class="weui-cell__bd">
							<div class="weui-cell weui-cell_select">
								<div class="weui-cell__bd">
									<select class="weui-select" name="consumeType">
										<option th:each="type: ${types}" th:value="${type.getDictionaryKey()}" th:text="${type.getDictionaryVal()}"></option>
									</select>
								</div>
							</div>
						</div>
					</div>
					<div class="weui-cell">
						<div class="weui-cell__hd">
							<label class="weui-label">消费名称</label>
						</div>
						<div class="weui-cell__bd">
							<input class="weui-input" type="text" name="consumeName" placeholder="请输入消费名称">
						</div>
					</div>
					<div class="weui-cell">
						<div class="weui-cell__hd">
							<label class="weui-label">消费金额</label>
						</div>
						<div class="weui-cell__bd">
							<input class="weui-input" type="text" name="consumePrice" placeholder="￥">
						</div>
					</div>
					<div class="weui-cell">
						<div class="weui-cell__hd">
							<label class="weui-label">消费时间</label>
						</div>
						<div class="weui-cell__bd">
							<input class="weui-input" type="text" name="consumeTime" id='datetime-picker' th:value="${#dates.format(#dates.createNow(), 'yyyy-MM-dd hh:ss')}">
						</div>
					</div>
					<div class="weui-cells__tips">请确认录入数据是否正确</div>
					<br/>
					<a href="javascript:;" id="bookInputSubmit" class="weui-btn weui-btn_primary">确认录入</a>
				</form>
			</div>

		</div>
	</div>

<script type="application/javascript">

	$.get("/api/home/get-all-account", function (res) {
		APP.ajaxRes(res, function (data) {
			let joins = [];
			for (let x in data) {
				joins.push({title: data[x].userName, value: data[x].uuid, "data-values": data[x].uuid})
			}
			$("#join").select({
				title: "选择人员",
				multi: true,
				min: 1,
				items: joins
			});
		})
	});

	$("#datetime-picker").datetimePicker();

	//提交表单
	APP.submitAction($("#bookInputSubmit"), function (item) {
		const field = APP.getFormValue($("#bookInputForm"));
		field.consumeParticipator = $("#join").data("values");
		APP.ajaxSubmit("/api/book/add-book", field, function (res) {
			APP.ajaxRes(res, function (uuid) {
				$.toptip('操作成功', 'success');
                location.href = "/book/to-success/"+uuid;
			}, function () {
				APP.disabled(item);
			})
		})
	});

</script>
</body>

</html>
